<template>
  <a-modal :width="1200" v-model:visible="showAuditDetailDialog" :title="`审批详情-${detail.approvalName}`" title-align="start" :mask-closable="false" @cancel="closedDialog" :footer="false">
    <div class="dialog-con">
      <template v-if="componentName && componentList[componentName]">
        <component :is="componentList[componentName]" :id="detail.id" :approvalType="detail.approvalType" :type="2" @updateStatus="isUpdateStatus = true" />
      </template>
      <a-empty v-else>该审批流正在开发区中...</a-empty>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import PurchasePlanAuth from './purchasePlanAuth.vue'
  import PurchaseOrderAuth from './purchaseOrderAuth.vue'
  import OtherOutAndInAuth from './otherOutAndInAuth.vue'
  import TransferAuth from './transferAuth.vue'
  import { ComponentNameMap } from '@/views/workFlow/types'
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {},
    },
  })

  const showAuditDetailDialog = ref(props.isShow)
  const isUpdateStatus = ref(false)

  const componentName = ComponentNameMap[props.detail.approvalType]
  // 组件注册（伪注册）
  const componentList = {
    PurchasePlanAuth,
    PurchaseOrderAuth,
    OtherOutAndInAuth,
    TransferAuth,
  }

  // 关闭
  function closedDialog() {
    console.log(isUpdateStatus.value)
    if (isUpdateStatus.value) {
      emit('success')
    }
    emit('closed')
    showAuditDetailDialog.value = false
  }
</script>

<style lang="less" scoped>
  .dialog-con {
    height: calc(84vh - 100px);
  }
</style>
